<div class="content-section introduction">
    <div>
        <span class="feature-title">知识库管理</span>
    </div>
</div>
<div class="content-section GridDemo">
    <div class="parent">
        <div style="position: absolute;top: 20px;left:3vw"  *ngIf="flowChartDatas && flowChartDatas.length">
            <svg  xmlns="http://www.w3.org/2000/svg" height="61em" viewbox="0 0 300 1200"  preserveAspectRatio="xMinYMin meet" >
                <g transform="translate(-40,0)">
                    <g transform="translate(0,0)">
                        <rect x="50" y="10" width="100" height="50" rx="10" ry="10" stroke-width="0.5" stroke="black"  [attr.fill]="flowChartDatas[0].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[0].name}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,60)" fill="#666"></polygon>
                    <g transform="translate(0,100)" (click)="jumper(1)" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" [attr.fill]="flowChartDatas[1].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[1].name}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,160)" fill="#666"></polygon>
                    <g transform="translate(0,200)" (click)="jumper(2)" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black"  [attr.fill]="flowChartDatas[2].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[2].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[2].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,260)" fill="#666"></polygon>
                    <g transform="translate(0,300)" (click)="jumper(3)" class="pointer_curser">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black"  [attr.fill]="flowChartDatas[3].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[3].name}}</text>
                        <rect x="120" y="10" width="30" height="15" rx="0" ry="0" stroke-width="0.5" stroke="black" fill="#E4E4E4"></rect>
                        <text x="135" y="23" font-size="12" fill="black" text-anchor="middle">{{flowChartDatas[3].record}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,360)" fill="#666"></polygon>
                    <g transform="translate(0,400)">
                        <rect x="50" y="10" width="100" height="50" rx="0" ry="0" stroke-width="0.5" stroke="black" stroke-dasharray="5,5,5"  [attr.fill]="flowChartDatas[4].fill"></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[4].name}}</text>
                    </g>
                    <polygon points="0 0, 1 0, 1 40, 5 40, 0.5 50, -4 40, 0 40" transform="translate(95,460)" fill="#666"></polygon>
                    <g transform="translate(0,500)">
                        <rect x="50" y="10" width="100" height="50"  rx="10" ry="10" stroke-width="0.5" stroke="black"  [attr.fill]="flowChartDatas[5].fill" ></rect>
                        <text x="100" y="40" font-size="14" fill="black" text-anchor="middle">{{flowChartDatas[5].name}}</text>
                    </g>
                </g>
            </svg>
        </div>
        <div class="node-right">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>